import { memo } from "react"
import Svg from "@/components/base/Svg"
import styled from "@emotion/styled"
import { ErrorDetails } from "../types"

const EmptyStyled = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #40444f;
    font-size: 14rem;
    margin-top: 116.88rem;
    font-family: Gilroy;
    font-weight: 500;
    line-height: 20rem;
`
interface ComponentProps {
    loading?: boolean
    error?: ErrorDetails
}

const Component: React.FC<React.PropsWithChildren<ComponentProps>> = (props) => {
    const { loading, error } = props

    return (
        <EmptyStyled>
            {error ? (
                <p>Error fetching data.</p>
            ) : loading ? (
                <p>Loading...</p>
            ) : (
                <>
                    <Svg src="base_image/no_data.svg" />
                    <p>There is no data yet!</p>
                </>
            )}
        </EmptyStyled>
    )
}

export default memo(Component)
